<template>
  <div class="pagination" v-if="totalPages > 1">
    <button
      class="pagination-button"
      :disabled="currentPage === 0"
      @click="goToPage(0)"
    >
      首页
    </button>

    <button
      class="pagination-button"
      :disabled="currentPage === 0"
      @click="goToPage(currentPage - 1)"
    >
      上一页
    </button>

    <span class="pagination-info">
      第 {{ currentPage + 1 }} 页 / 共 {{ totalPages }} 页
    </span>

    <button
      class="pagination-button"
      :disabled="currentPage === totalPages - 1"
      @click="goToPage(currentPage + 1)"
    >
      下一页
    </button>

    <button
      class="pagination-button"
      :disabled="currentPage === totalPages - 1"
      @click="goToPage(totalPages - 1)"
    >
      末页
    </button>

    <span class="pagination-total">
      共 {{ totalElements }} 条记录
    </span>
  </div>
</template>

<script>
export default {
  name: 'Pagination',
  props: {
    currentPage: {
      type: Number,
      default: 0
    },
    totalPages: {
      type: Number,
      default: 0
    },
    totalElements: {
      type: Number,
      default: 0
    }
  },
  methods: {
    goToPage(page) {
      if (page >= 0 && page < this.totalPages && page !== this.currentPage) {
        this.$emit('page-change', page)
      }
    }
  }
}
</script>

<style scoped>
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin: 2rem 0;
  flex-wrap: wrap;
}

.pagination-button {
  padding: 0.5rem 1rem;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.pagination-button:hover:not(:disabled) {
  background-color: #0056b3;
}

.pagination-button:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
  opacity: 0.6;
}

.pagination-info {
  padding: 0.5rem 1rem;
  font-weight: bold;
  color: #333;
}

.pagination-total {
  padding: 0.5rem 1rem;
  color: #666;
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .pagination {
    gap: 0.25rem;
  }

  .pagination-button,
  .pagination-info,
  .pagination-total {
    padding: 0.4rem 0.8rem;
    font-size: 0.9rem;
  }
}
</style>